iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
1
Modern Web

Quasar CLI Framework 邪教:整合分散的前端技術和工具、常見的開發需求系列 第 16

第十六天:專案的初始化 - 「前後台頁面存取權限」情境需求練習 (第三部分總結)

  • 分享至 

  • xImage
  •  

在結束第三部分前
我以一個萬年老梗,卻很重要的需求:前後台頁面存取權限
來統整我們第三部分的
作法有非常多種,提供給正在學習Vue的人自行練習與思考

一、需求說明與功能展示

小通的主管為了讓小通理解如何實作Quasar初始化的流程
決定讓小通嘗試完成一個網站,包含一般前台通靈後台
需求包括「前後台存取權限」與「後端API串接」

(一) 前後台存取權限

  1. 一般前台任何人都能進入,點選右上方的登入,可以進入登入頁面
  2. 使用者可於登入頁面輸入帳號、密碼,若帳號密碼成功,導到通靈後台,失敗則留在原本的登入頁面
  3. 若使用者並未處於登入的情況下,嘗試進入通靈後台,強制導回前台首頁

  1. 若使用者已經登入且未登出的情況下,關掉瀏覽器或離開網頁後,可以直接進入通靈後台

(二) API串接需求

小通的主管,請小通使用「miragejs」自行模擬RESTFul API Server
方便前端工程師在後端開發完成前,撰寫並測試前端串接的功能

miragejs 可以新增假的Model資料來測試帳號登入成功或失敗
實際的Token驗證邏輯前端不需要模擬,只需簡單判斷Request是否Token即可

  1. 測試區的API網址:http://development.com.tw/api
    正式區的API網址:http://production.com.tw/api

  2. 登入
    (1) 網址:API網址/login
    (2) 方法: POST
    (3) Request格式:

{
    username: 'username',
    password: 'password'
}

(4) 登入成功的Response,Status Code為200,Response格式:

{ 
    error: null, 
    values: { 
      token: 'token_string' 
    } 
}

(5) 登入失敗的Response,Status Code為400,Response格式:

{ 
    error: 'Invalid Username or Password',
    values: null
}
  1. 登出
    (1) 網址:API網址/logout
    (2) 方法: POST
    (3) Request格式:
{
    token: 'token_string'
}

(4) 登出成功的Response,Status Code為200,Response格式:

{ 
    error: null, 
    values: null
}

(5) 登出失敗的Response格式,Status Code為401,Response格式:

{ 
    error: 'Invalid Token',
    values: null
}
  1. 後端檢查當前Token是否登入且有效
    (1) 網址:API網址/check_token
    (2) 方法: POST
    (3) Request格式:
{
    token: 'token_string'
}

(4) 使用者為登入狀態且Token有效的Response,Status為200,Response格式:

{ 
    error: null, 
    values: null
}

(5) 使用者並未登入狀態,或者Token無效的Response,Status為401,Response格式:

{ 
    error: 'Invalid Token',
    values: null
}

二、重要的初始化流程

  1. Token的存取 (Cookie 或 localStorage 與 Vuex的操作)
  2. axios 的Base URL 和 每次request帶入token的方式 (axios.interceptors.request.use)
  3. miragejs 的啟動
  4. 每一次進入任一前端頁面時,檢查該頁面是否需要登入 (vue router 的 router.beforeEach)

上一篇
第十五天:專案的初始化 - 拆分環境變數 (feat. process.env、CommonJS)
下一篇
第十七天:網站的基本結構 - 版型與頁面I (<q-layout>、<q-header>、<q-drawer>、<q-footer>)
系列文
Quasar CLI Framework 邪教:整合分散的前端技術和工具、常見的開發需求31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言